<template>
  <ElDescriptions :column="1" border>
    <ElDescriptionsItem label="服务名称" :min-width="80">
      <ElSelect v-model="data.microName" :disabled="disabled">
        <ElOption label="<无>" value="" />
        <ElOption v-for="(micro, microName) in micros" :label="micro.label" :value="microName" :key="microName" />
      </ElSelect>
    </ElDescriptionsItem>
    <ElDescriptionsItem label="模块名称">
      <ElSelect v-model="data.seedName" :disabled="disabled">
        <ElOption label="<无>" value="" />
        <ElOption v-for="(seed, seedName) in seeds" :label="seed.label" :value="seedName" :key="seedName" />
      </ElSelect>
    </ElDescriptionsItem>
  </ElDescriptions>
</template>
<script setup lang="ts">
  import { ElDescriptions, ElDescriptionsItem, ElOption, ElSelect } from 'element-plus';
  import { PropsType } from '@/seed-application/components/seed/DefaultSeed.vue';
  import { computed, reactive, ref, watch } from 'vue';
  import { breadcrumbs, currentApp, currentMicro } from '@/views/seed-dev';
  
  const data = reactive<PropsType>({seedName: ''})
  const disabled = ref<boolean>(false)

  const last = breadcrumbs.value[breadcrumbs.value.length - 1]
  switch(last.type) {
    case 'seed':
      data.microName = currentMicro.value
      data.seedName = last.node.data.seedName
      disabled.value = true
  }

  const micros = computed(() => currentApp.value?.micros || {})
  const seeds = computed(() => {
    const microName = data.microName
    if(microName) {
      return micros.value[microName].seeds
    } else {
      return currentApp.value.seeds
    }
  })

  watch(() => data.microName, () => data.seedName = void 0)
</script>